<script setup>
import {nextTick, ref, watch} from "vue";
import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import DictItemFormDialog from "./ItemForm.vue"
import { addItem, updateItem, itemListPage, deleteItemById } from '@/api/system/dict.js'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const isVisible = ref(false)

const formDialogVisible = ref(false)

watch(() => props.visible, (newVal, oldValue) => {
  isVisible.value = newVal
})

const emit = defineEmits(["update:visible"])

const itemData = ref([
  {id: 11, name: "男", sort: 1, status: 1, createTime: "2024-07-19 12:27:00"},
  {id: 12, name: "女", sort: 2, status: 1, createTime: "2024-07-19 12:27:00"},
  {id: 13, name: "其他", sort: 3, status: 2, createTime: "2024-07-19 12:27:00"},
])

const item = ref({
  id: '',
  dictId: '',
  label: '',
  labelValue: '',
  sort: '',
  createTime: ''
})

watch(() => props.data, (newVal) => {
  search.value.dictId = newVal.id
  requestPageList()
})

const search = ref({
  dictId: '',
  pageNum: 1,
  pageSize: 5,
  total: 10
})

const dictItemFormDialogRef = ref(null)

//分页请求
const requestPageList = () => {
  itemListPage(search.value).then(resp => {
    search.value.total = Number.parseInt(resp.data.total)
    itemData.value = resp.data.data
  })
}

const handleCurrentChange = (currentPage) => {
  search.value.pageNum = currentPage
}

const onCancel = () => {
  emit('update:visible', false)
}

const onConfirm = () => {
  emit('update:visible', false)
}

const dictItemFormDialogConfirm = async (data) => {
  if (!data.dictId) {
    data.dictId = props.data.id
  }
  if (data.id) {
    await updateItem(data)
  } else {
    await addItem(data)
  }
  requestPageList()
  formDialogVisible.value = false
}

const onAdd = () => {
  formDialogVisible.value = true
  nextTick(() => {
    dictItemFormDialogRef.value.resetFields()
  })
}

const onEdit = (rowData) => {
  item.value = {...rowData}
  formDialogVisible.value = true
}

const onDelete = (rowData) => {
  ElMessageBox.confirm("是否确定删除这条数据?", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    type: "warning"
  }).then(() => {
    deleteItemById(rowData.id).then(() => {
      requestPageList()
    })
  }, () => {})
}
</script>

<template>
  <el-dialog v-model="isVisible" title="字典项" width="720px" :close-on-click-modal="false">
    <el-button type="primary" :icon="Plus" @click="onAdd">新增</el-button>
    <el-table :data="itemData" empty-text="暂无数据">
      <el-table-column type="index" label="ID"/>
      <el-table-column prop="label" label="键名" />
      <el-table-column prop="labelValue" label="键值" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column align="right" label="操作">
        <template #default="scope">
          <el-button link size="small" type="primary" :icon="Edit" @click="onEdit(scope.row)">编辑</el-button>
          <el-button link size="small" type="danger" :icon="Delete" @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :current-page="search.pageNum" :total="search.total" style="margin-top: 16px" @current-change="handleCurrentChange" />
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </template>
  </el-dialog>

  <dict-item-form-dialog ref="dictItemFormDialogRef" v-model:visible="formDialogVisible" :data="item" @confirm="dictItemFormDialogConfirm"></dict-item-form-dialog>
</template>

<style scoped lang="scss">

</style>